<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link href="<c:url value="/css/style.css"/>" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <link rel="stylesheet" href="css/department-modal.css">
</head>
<body>
<div class="container">
    <!-- 侧边栏 -->
    <div class="sidebar">
        <h2>员工管理系统</h2>
        <div class="user-info">
            <p>欢迎, ${user.username}</p>
            <a href="login">退出登录</a>
        </div>
        <ul class="menu">
            <li><a href="emp1">员工管理</a></li>
            <li><a href="department">部门管理</a> </li>
            <li><a href="#">薪资管理</a></li>
            <li><a href="attendance">考勤管理</a></li>
            <li><a href="#">修改密码</a></li>
            <li><a href="register">注册管理员</a></li>
        </ul>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <h1>部门管理</h1>
        <!-- 添加部门按钮 -->
        <button id="addDeptBtn">添加部门</button>

        <!-- 部门列表 -->
        <h2>部门列表</h2>
        <table border="1">
            <tr>
                <th>部门 ID</th>
                <th>部门名称</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${departments}" var="department">
                <tr>
                    <td>${department.deptId}</td>
                    <td>${department.deptName}</td>
                    <td>
                        <form action="department" method="post" style="display: inline;">
                            <input type="hidden" name="action" value="delete">
                            <input type="hidden" name="deptId" value="${department.deptId}">
                            <input type="submit" value="删除">
                        </form>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>
</div>

<!-- 模态框 -->
<div id="addDeptModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>添加部门</h2>
        <form action="department" method="post">
            <input type="hidden" name="action" value="add">
            <div class="form-group">
                <label for="deptName">部门名称:</label>
                <input type="text" id="deptName" name="deptName" required>
            </div>
            <input type="submit" value="添加">
        </form>
    </div>
</div>

<script>
    // 获取模态框
    var modal = document.getElementById("addDeptModal");

    // 获取打开模态框的按钮
    var btn = document.getElementById("addDeptBtn");

    // 获取关闭模态框的 <span> 元素
    var span = document.getElementsByClassName("close")[0];

    // 当用户点击按钮时，打开模态框
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // 当用户点击 <span> (x) 时，关闭模态框
    span.onclick = function() {
        modal.style.display = "none";
    }

    // 当用户在模态框外点击时，关闭模态框
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>
</body>
</html>